<template>
	<view class="option-menu mb-3 theme-shadow" @click="handleClick">
		<view class="menu-icon">
			<image :src="relative_url + props.icon" />
		</view>
		
		<view class="menu-value">
			<view class="large-text text-black mb-1" style="font-weight: 500;">
				{{ props.title }}
			</view>
			<view class="small-text text-gray">
				{{ props.content }}
			</view>
		</view>
		
		<view class="menu-rightraw">
			<text class="lg text-gray cuIcon-right"></text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onMounted, Ref, ref } from "vue"
import { router } from "@/router"
import env from "@/env"

const props = defineProps({
	icon: {
		type: String,
		default: ""
	},
	title: {
		type: String,
		default: ""
	},
	content: {
		type: String,
		default: ""
	},
	page: {
		type: String,
		default: ""
	}
})

const relative_url: Ref<string> = ref("")
const handleClick = ():void => {
	console.log(props.page)
	router.push(props.page)
		.catch(err => {
			console.log(err)
		})
}

onMounted(() => {
	relative_url.value = env.H5_RELATIVE_URL
})

</script>

<style lang="stylus" scoped>
.option-menu
	background-color #fff
	box-sizing: border-box
	padding 40rpx
	display: flex
	align-items: center
	// height 188rpx
	border-radius 12rpx
	.menu-icon
		width: 44rpx
		height: 44rpx
		margin: 4rpx 0 44rpx 20rpx
		image
			width: 100%
			height: 100%
	.menu-value
		width: 410rpx
		padding-left 40rpx
	.menu-rightraw
		width: 80rpx
		text-align: right
		font-size: 36rpx
</style>